<script setup>
import {ref,onMounted,onUnmounted, nextTick} from "vue"
defineProps({
	noZoom:{
		type:String,
		default:"zi_zoom_default"
	},
	zoom:{
		type:String,
		default:"zi_zoom_defaultZoom"
	},
	offset:{
		type:String,
		default:"0"
	}
})
defineOptions({
	name:"zoom"
})
const isMobile=ref(false)
const transition=ref(false)
function checkWindowSize() {
	isMobile.value = window.innerWidth <= 1000;
	transition.value=false
	if(isMobile.value===true){
		state.value=false
	}
}
onMounted(()=> {
    checkWindowSize(); // 初始化时检查一次
    window.addEventListener('resize', checkWindowSize);
})
onUnmounted(()=> {
    window.removeEventListener('resize', checkWindowSize);
})
const state=ref(false)
function setState(){
	state.value=!state.value
	nextTick(()=>{
		if(isMobile.value===true){
			transition.value=true
		}
	})
}
</script>

<template>
	<div class="zoom_box">
		<div class="bg">
			<!-- <div class="icon_slot">
				<div class="icon">
					logo
				</div>
			</div> -->
			<div class="button" @click="setState"><zi-icon name="menu"></zi-icon></div>
		</div>
		<div class="show" :style="{right:offset}">
			<div class="show_box">
				<div :class="[{transition}]" :style="{transform:`translateY(${(isMobile===false||state===false)?isMobile===false?'0':'-100%':'0%'})`// scaleY(${(isMobile===false||state===true)?1:0})
			 }">
					<slot :class="isMobile===false?noZoom:zoom" ></slot>
				</div>
			</div>
		</div>
	</div>
</template>
<style scoped>
.bg,.zoom_box{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
    align-items: center;
	height: 50px;
}
.button{
	display: none;
	width: 1em;
	height: 1em;
	font-size: 24px;
	line-height: 1em;
	cursor: pointer;
}
@media screen and (max-width: 1000px) {
	.bg{
		width: 100%;
		background-color: #fff;
		position: relative;
    	z-index: 2;
	}
	.zoom_box{
		/* justify-content: flex-end; */
	}
	.zoom_box{
		position: relative;
	}
    .show {
		pointer-events: none;
    	z-index: 1;
        position: absolute;
		right: 0;
		bottom: 0;
		width: 100vw;
    	text-align: center;
		/* overflow: hidden; */
    }
	.show_box{
		pointer-events: none;
		/* transform: translateY(100%) scale(0); */
		transform-origin: left top;
		overflow: hidden;
		transform: translateY(100%);
	}
	.show_box>*{
		pointer-events: all;
	}
	.button{
		display: block;
	}
}
.transition{
	transition: all 0.3s;
}
</style>
<style>
.zi_zoom_default{
	display: flex;
	flex-direction: row;
}
.zi_zoom_default>*{
	padding: 0 1em;
	height: 50px;
	line-height: 50px;
	cursor: pointer;
}
.zi_zoom_default>*:hover{
	color: #686868;
}
.zi_zoom_default>*:active{
	color: #b3b3b3;
}
.zi_zoom_defaultZoom>*{
	height: 50px;
	line-height: 50px;
}
.zi_zoom_defaultZoom{
	cursor: pointer;
	background-color: #fff;
}
.zi_zoom_defaultZoom>*:hover{
	color: #686868;
}
.zi_zoom_defaultZoom>*:active{
	color: #b3b3b3;
}
</style>